<template>
	<!-- 登录、开屏红包之后弹窗 -->
	<u-overlay :show="isCoupon && isLogin" :zIndex="999997" @touchmove.stop.prevent="moveHandle">
		<view class="container u-flex-column u-col-center u-flex-center">
			<view class="main">
				<view :class="['content u-flex-col u-flex-center',!couponClicked?'':'content-select']">
					<view class="price u-flex u-col-end" v-if="amount != 0">
						<span style="font-size: 45rpx;padding-right: 10rpx;line-height: 60rpx;">￥</span>
						<span style="font-size: 85rpx;">{{amount}}</span>
					</view>
				</view>
				<view class="main-button u-flex">
					<u-button v-if="!couponClicked" text="立即领取" color="#F03636" :hairline="false"
						:customStyle="submitCustomStyle" :loading="!is_submit" loadingText="领取中" @click="submit">
					</u-button>
					<u-button v-else text="立即收下" color="#F03636" :customStyle="submitCustomStyle" @click="close">
					</u-button>
				</view>
			</view>
		</view>
	</u-overlay>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				is_submit: true,
				submitCustomStyle: {
					width: "200rpx",
					height: "60rpx",
				},
				amount: 0,
				couponClicked: false, // 只能领取一次
				scene:''
			}
		},
		computed: {
			...mapState({
				isLogin: state => state.user.isLogin,
				isCoupon: state => state.popFrame.isCoupon,
			})
		},
		props: {
			activityByScene: {
				type: Object,
				default: () => {}
			}
		},
		watch: {
			activityByScene: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.init();
					}
				},
				immediate: true
			}
		},
		methods: {
			...mapMutations('popFrame', ['setIsCoupon']),
			init() {
				this.setIsCoupon(true);
			},
			close() {
				this.setIsCoupon(false)
			},
			async submit() {
				if (!this.couponClicked) { // 检查是否已执行过方法
					uni.showLoading({
						title: '红包领取中'
					});
					if (this.is_submit == false) return
					this.is_submit = false
					try {
						const res = await this.$post("redPacket/receive", {
							id: this.activityByScene.id
						});
						uni.hideLoading();
						this.is_submit = true
						this.$showToast(res.msg);
						this.amount = res.data.amount;
						this.couponClicked = true; // 将标志位设置为 true，表示方法已执行过
					} catch (ex) {
						this.is_submit = true
						this.couponClicked = false;
						this.$errorToast(ex);
					}
				} else {
					this.close()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;

		.main {
			$base-content: url();
			$base-contents: url();

			.content {
				width: 480rpx;
				height: 460rpx;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				background: $base-content center top / 100% auto no-repeat;
				transition: background-image 0.5s ease;
				/* 定义背景图像变化的过渡效果 */

				.price {
					color: $base-color;
					line-height: 1;
				}

				.price-icon {
					color: #F03636;
					font-size: 95rpx;
				}
			}

			.content-select {
				background: $base-contents center top / 100% auto no-repeat;
			}

			.main-button {
				margin-top: 40rpx;
			}
		}
		
		// .icon {
		// 	margin-top: 60rpx;
		// 	width: 60rpx;
		// 	height: 60rpx;
		// 	border-radius: 50%;
		// 	border: 2rpx solid #FFFFFF;
			
		// 	.icon-img {
		// 		width: 40rpx;
		// 		height: 40rpx;
		// 		display: block;
		// 	}
		// }
	}
</style>